<div class="text-center mb-4">
    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="profile-img mb-2" alt="会员头像">
    <h5>张女士</h5>
    <p class="text-muted">黄金会员 · 到期日: 2023-12-31</p>
</div>

<div class="card mb-4">
    <div class="card-body">
        <h6 class="card-title">我的课程</h6>
        <div class="d-flex justify-content-between mb-2">
            <span class="text-muted">已预约</span>
            <strong>12节</strong>
        </div>
        <div class="d-flex justify-content-between mb-2">
            <span class="text-muted">已完成</span>
            <strong>8节</strong>
        </div>
        <div class="d-flex justify-content-between">
            <span class="text-muted">剩余</span>
            <strong>4节</strong>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <h6 class="card-title mb-3">我的预约</h6>
        <div class="class-slot booked mb-2">
            <div class="d-flex justify-content-between">
                <div>
                    <strong>塑形普拉提</strong>
                    <div class="text-muted small">5月15日 10:30-11:30 · 李教练</div>
                </div>
                <button class="btn btn-sm btn-outline-danger">取消</button>
            </div>
        </div>
        <div class="class-slot booked">
            <div class="d-flex justify-content-between">
                <div>
                    <strong>康复普拉提</strong>
                    <div class="text-muted small">5月18日 18:00-19:00 · 王教练</div>
                </div>
                <button class="btn btn-sm btn-outline-danger">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <h6 class="card-title mb-3">会员卡</h6>
        <div class="vip-card mb-3">
            <h6>黄金会员卡</h6>
            <p class="small">有效期至: 2023-12-31</p>
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4 class="mb-0">12节</h4>
                    <small>剩余: 4节</small>
                </div>
                <button class="btn btn-sm btn-light">续费</button>
            </div>
        </div>
        <button class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#vipModal">购买新会员卡</button>
    </div>
</div>

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">
        <i class="bi bi-person me-2"></i>个人资料
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="bi bi-heart me-2"></i>我的收藏
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="bi bi-credit-card me-2"></i>支付记录
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <i class="bi bi-gear me-2"></i>设置
    </a>
    <a href="#" class="list-group-item list-group-item-action text-danger">
        <i class="bi bi-box-arrow-right me-2"></i>退出登录
    </a>
</div>